<template>
  <div class="my-4">
    <avue-form ref="form" v-model="form" :option="option" @submit="submit"> </avue-form>
  </div>
</template>

<script>
import { applySave } from '@/api/chart/chart'

export default {
  name: 'ChartFormDetail',
  props: {
    detail: { type: Boolean, default: false },
    current: { type: Object, default: () => {} },
  },
  data() {
    return {
      loading: true,
      form: {},
      option: {
        detail: this.detail,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: 'left',
        menuLeft: false,
        labelSuffix: ' ',
        group: [
          {
            label: '指标信息',
            arrow: false,
            prop: 'jbxx',
            column: [
              {
                label: '指标编码',
                prop: 'code',
                span: 12,
                // rules: [{ required: true, message: '请输入指标编码' }],
                disabled: true,
              },
              {
                label: '指标名称',
                prop: 'name',
                span: 12,
                // rules: [{ required: true, message: '请输入指标名称' }],
                disabled: true,
              },
              {
                label: '指标分类',
                prop: 'indexType',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择指标分类' }],
                dicUrl: '/api/sys/dict/list',
                props: {
                  label: 'dictValue',
                  value: 'dictValue',
                },
                dicMethod: 'post',
                dicQuery: {
                  dictTypeCode: 'martix_type',
                },
                disabled: true,
              },
              {
                label: '指标定义',
                prop: 'indexDefine',
                span: 12,
                // rules: [{ required: true, message: '请输入指标定义' }],
                disabled: true,
              },
              {
                label: '修订人',
                prop: 'reviser',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择修订人' }],
                disabled: true,
              },
              {
                label: '责任人',
                prop: 'director',
                type: 'select',
                span: 12,
                // rules: [{ required: true, message: '请选择责任人' }],
                dicUrl: '/api/user/userGrid/1/999',
                props: {
                  label: 'nickName',
                  value: 'userId',
                },
                dicMethod: 'post',
                dicFormatter: (res) => res.listObject,
                disabled: true,
              },
            ],
          },
        ],
      },
      isEdit: false,
    }
  },
  watch: {
    current: {
      deep: true,
      immediate: true,
      handler() {
        this.init()
      },
    },
    form: {
      deep: true,
      immediate: true,
      handler(value) {
        if (!this.isEdit) {
          localStorage.setItem('chart', JSON.stringify(value))
        }
      },
    },
  },
  created() {},
  methods: {
    async submit(_, done) {
      let { id } = this.current
      let { reason } = this.form
      const res = await applySave({ matrixId: id, reason, approveStatus: '0' })
      if (res.success) {
        this.$message.success('提交成功')
        this.$router.back()
      } else {
        this.$message.error(res.message)
      }
      done()
    },
    async init() {
      if (this.$route.params.id) {
        this.loading = false
        this.isEdit = true
      } else {
        this.loading = false
        this.isEdit = false
      }
      this.form = { ...this.current }
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-form-detail {
  background: #fff;
}

::v-deep .avue-form__menu--left {
  display: none;
}
</style>
